<template>
	<view>

		<!-- 佣金转出S -->
		<view class="content-wrap tp-w690" v-if="curTit==='佣金转出'">
			<view class="tit">转出至余额</view>
			<view class="input_money-wrap">
				<text style="font-size: 30rpx;">￥</text>
				<input class="input" type="number" v-model="rechargeMoney" placeholder="请输入" />
			</view>
			<view class="input_money-wrap balance">
				<text>可转出佣金余额{{commossion}}</text>
			</view>
		</view>
		<!-- 佣金转出E -->

		<!-- 佣金提现S -->
		<view class="content-wrap tp-w690" v-if="curTit==='佣金提现'">
			<view class="tit">提现</view>
			<view class="input_money-wrap">
				<text style="font-size: 30rpx;">￥</text>
				<input class="input" type="number" v-model="rechargeMoney" placeholder="请输入" />
			</view>
			<view class="input_money-wrap balance">
				<text>我的余额{{commossion}}</text>
			</view>
		</view>
		<view class="content-wrap tp-w690" v-if="curTit==='佣金提现'">
			<view class="tit">选择{{curTit}}方式</view>
			<view class="input-wrap" @click="handleChoosePayType('wechat')">
				<view class="l-wrap">
					<view class="icon">
						<image src="../static/imgs/icons/wechat-icon.png" mode=""></image>
					</view>
					<text>微信</text>
				</view>
				<view class="r-wrap">
					<!-- <text class="tp-fc999" @click.stop="goToPayNumber('wechat')">绑定微信号</text> -->
					<uni-icons v-if="curPayType==='wechat'" class="choose-icon" type="circle-filled" color="#FFAF3C" size="22"></uni-icons>
					<uni-icons v-else class="choose-icon" type="circle" color="#999" size="22"></uni-icons>
				</view>
			</view>
			<!-- #ifdef H5 -->
			<!-- <view class="input-wrap" @click="handleChoosePayType('alipay')">
				<view class="l-wrap">
					<view class="icon">
						<image src="static/alipay-icon.png" mode=""></image>
					</view>
					<text>支付宝</text>
				</view>
				<view class="r-wrap">
					<text class="tp-fc999" @click.stop="goToPayNumber('alipay')">绑定支付宝账号</text>
					<uni-icons v-if="curPayType==='alipay'" class="choose-icon" type="circle-filled" color="#FFAF3C" size="22"></uni-icons>
					<uni-icons v-else class="choose-icon" type="circle" color="#999" size="22"></uni-icons>
				</view>
			</view> -->
			<!-- #endif -->
		</view>
		<view class="tip" v-if="curTit==='佣金提现'"> <text style="color:#FFAF3C;">提示：</text> 满100方可提现</view>
		<!-- 佣金提现E -->

		<!-- 会员充值S -->
		<view class="recharge-list" v-if="curTit==='会员充值'">
			<view class="recharge-item" :class="{active: curRecharge.id === item.id}" v-for="(item, index) in rechargeList" :key="index"
			 @click="handleChooseRecharge(item)">
				<view class="l-wrap">
					<text>{{item.rechargeMoney}}元</text>
					<text class="add" v-if="item.rechargeReward != 0">送{{item.rechargeReward}}元</text>
				</view>
				<view class="r-wrap">￥{{item.rechargeMoney}}</view>
			</view>
			<view class="recharge-item" :class="{active: !curRecharge.id}"
			 @click="curRecharge = {}">
				<view class="l-wrap">
					<text class="tp-fz30">任意金额</text>
				</view>
				<view class="r-wrap"><input type="number" class="tp-tr" placeholder-class="tp-fz24" v-model="money" value="" placeholder="请输入任意整数金额" /></view>
			</view>
		</view>
		<view class="content-wrap tp-w690" v-if="curTit==='会员充值'">
			<view class="tit">支付方式</view>
			<view class="input-wrap" @click="handleChoosePayType('wechat')">
				<view class="l-wrap">
					<view class="icon">
						<image src="../static/imgs/icons/wechat-icon.png" mode=""></image>
					</view>
					<text>微信</text>
				</view>
				<view class="r-wrap">
					<uni-icons v-if="curPayType==='wechat'" class="choose-icon" type="circle-filled" color="#FFAF3C" size="22"></uni-icons>
					<uni-icons v-else class="choose-icon" type="circle" color="#999" size="22"></uni-icons>
				</view>
			</view>
			<!-- #ifdef H5 -->
			<view class="input-wrap" @click="handleChoosePayType('alipay')">
				<view class="l-wrap">
					<view class="icon">
						<image src="static/alipay-icon.png" mode=""></image>
					</view>
					<text>支付宝</text>
				</view>
				<view class="r-wrap">
					<uni-icons v-if="curPayType==='alipay'" class="choose-icon" type="circle-filled" color="#FFAF3C" size="22"></uni-icons>
					<uni-icons v-else class="choose-icon" type="circle" color="#999" size="22"></uni-icons>
				</view>
			</view>
			<!-- #endif -->
		</view>
		<!-- 会员充值E -->

		<view class="common-btn" @click="handleRecharge">{{btnText}}</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				curTit: '充值',
				curPayType: 'wechat', // 当前支付方式： 微信wechat|支付宝alipay
				balance: 0, // 当前余额
				commossion: 0, // 当前佣金余额
				rechargeMoney: '', // 要充值的金额
				btnText: '充值',
				money: null, // 充值的金额
				rechargeList: [],
				curRecharge: {}
			};
		},
		onLoad(opt) {
			this.curTit = opt && opt.tit
			uni.setNavigationBarTitle({
				title: this.curTit
			})
			switch (this.curTit) {
				case '会员充值':
					this.btnText = '充值'
					break
				case '佣金转出':
					this.btnText = '转出'
					break
				case '佣金提现':
					this.btnText = '提现'
					break
			}
			this.getUserBalance()
			this.getRechargeList()
		},
		methods: {
			handleChooseRecharge(item) {
				this.curRecharge = item
			},
			handleChoosePayType(type) {
				this.curPayType = type
			},
			getUserBalance() {
				this.$http.get(this.$api.customerAccountMoney).then(res => {
					if (res.code === 200) {
						this.balance = res.data.balance
						this.commossion = res.data.yongBalance
					}
				})
			},
			// 充值 转出 提现
			handleRecharge() {
				const accountType = this.curPayType === 'wechat' ? 0 : 1 // 账户类型 0微信1支付宝
				if (this.curTit === '佣金转出') { // 佣金转出
					if (!this.rechargeMoney.trim()) {
						return uni.showToast({
							title: '请输入金额',
							icon: 'none'
						})
					}
					if (this.rechargeMoney.trim() <= 0) {
						this.rechargeMoney = ''
						return uni.showToast({
							title: '请输入大于0的金额',
							icon: 'none'
						})
					}
					uni.showLoading({
						title: '提交中...',
						mask: true
					})
					this.$http.get(this.$api.commissionOut, {
						money: this.rechargeMoney
					}).then(res => {
						uni.hideLoading()
						if (res.code === 200) {
							uni.showToast({
								title: '佣金转出成功'
							})
							this.getUserBalance()
							this.rechargeMoney = ''
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1500)
						}
					})
				} else if (this.curTit === '会员充值') { // 充值
					if (this.curPayType == 'wechat') {
						if(!this.curRecharge.id && !this.money) return uni.showToast({
							title: '请选择填写金额',
							icon: 'none'
						})
						uni.showLoading({
							title: '提交中...',
							mask: true
						})
						this.$http.get(this.$api.recharge, {
							id: this.curRecharge.id || '',
							accountType,
							money: this.money || 0,
						}).then(res => {
							uni.hideLoading()
							if (res.code === 200) {
								let payInfo = res.data
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: payInfo.timeStamp,
									nonceStr: payInfo.nonceStr,
									package: payInfo.package,
									signType: payInfo.signType,
									paySign: payInfo.sign,
									success: function(res) {
										uni.showToast({
											title: '充值成功'
										})
										setTimeout(() => {
											uni.navigateBack({
												delta: 1
											})
										}, 1500)
									},
									fail: function(err) {
										console.log('失败:' + JSON.stringify(err));
									}
								});

							}
						})
					} else if (this.curPayType == 'alipay') {
						uni.showLoading({
							title: '提交中...',
							mask: true
						})
						this.$http.get(this.$api.rechargeAlipay, {
							id: this.curRecharge.id || '',
							accountType: 2,
						}).then(res => {
							uni.hideLoading()
							if (res.code === 200) {
								location.href = res.data.link
							}
						})
					}


				} else if (this.curTit === '佣金提现') {
					if (!this.rechargeMoney.trim()) {
						return uni.showToast({
							title: '请输入金额',
							icon: 'none'
						})
					}
					if (this.rechargeMoney.trim() <= 0) {
						this.rechargeMoney = ''
						return uni.showToast({
							title: '请输入大于0的金额',
							icon: 'none'
						})
					}
					uni.showLoading({
						title: '提交中...',
						mask: true
					})
					this.$http.get(this.$api.withdraw, {
						money: this.rechargeMoney,
						accountType: 1,
					}).then(res => {
						uni.hideLoading()
						if (res.code === 200) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1500)
						} else if (res.code === 2030 && this.curPayType === 'alipay') { // 支付宝账号不存在
							uni.navigateTo({
								url: './aliNumber'
							})
						} else if (res.code === 2030 && this.curPayType === 'wechat') { // 微信账号不存在
							uni.navigateTo({
								url: './weiNumber'
							})
						}
					})
				}
			},
			// 切换支付方式
			goToPayNumber(type) {
				if (type == 'wechat') {
					uni.navigateTo({
						url: './weiNumber'
					})
				} else if (type == 'alipay') {
					uni.navigateTo({
						url: './aliNumber'
					})
				}
			},
			getRechargeList() {
				this.$http.get(this.$api.rechargeList).then(res => {
					if (res.code === 200) {
						this.rechargeList = res.data
						this.curRecharge = res.data[0]
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-wrap {
		padding: 0 20rpx;
		box-sizing: border-box;
		border-radius: 8rpx;
		background-color: #fff;
		margin-top: 20rpx;

		.tit {
			font-size: 32rpx;
			height: 88rpx;
			line-height: 88rpx;
		}

		.input_money-wrap {
			display: flex;
			align-items: center;
			font-size: 36rpx;
			border-bottom: 1px solid #ebebeb;
			height: 78rpx;

			.input {
				padding-left: 20rpx;
			}

			&.balance {
				font-size: 24rpx;
				color: #999;
				border: none;
			}
		}

		.input-wrap {
			width: 630rpx;
			margin: 0 auto;
			height: 108rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			border-top: 1px solid #ebebeb;

			.l-wrap {
				display: flex;
				align-items: center;
				font-size: 28rpx;

				.icon {
					height: 48rpx;
					width: 48rpx;
					margin-right: 20rpx;
				}
			}

			.r-wrap {
				display: flex;
				align-items: center;

				.num {
					color: #666;
					font-size: 28rpx;
				}

				.choose-icon {
					margin-left: 20rpx;
				}
			}
		}
	}

	.tip {
		font-size: 26rpx;
		color: #666;
		margin-top: 30rpx;
		padding: 0 30rpx;
	}

	.common-btn {
		width: 640rpx;
		box-shadow: none;
		margin-top: 80rpx;
	}

	.recharge-list {
		margin: 10rpx 0 60rpx;

		.recharge-item {
			height: 100rpx;
			width: 690rpx;
			margin: 20rpx auto 0;
			padding: 0 40rpx;
			box-sizing: border-box;
			border-radius: 12rpx;
			border: 2px solid rgba(235, 235, 235, 1);
			font-size: 36rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.l-wrap {
				display: flex;
				align-items: center;

				.add {
					color: #FFAF3C;
					font-size: 26rpx;
					margin-left: 52rpx;
				}
			}

			.r-wrap {}

			&.active {
				color: #00B4FF;
				border: 2rpx solid rgba(0, 180, 255, 1);
				background: rgba(240, 251, 255, 1);
			}
		}
	}
</style>
